<template>
  <div class="head_wrap">
    <div class="logo">
      <img src="../assets/logo.png" alt="" />
      <div>
        <h2>清华学生系统</h2>
        <h4>Qing Hua student management</h4>
      </div>
    </div>
    <div class="head_menu">
      <el-link icon="el-icon-platform-eleme">6元首充</el-link>
      <el-link icon="el-icon-star-on">在线客服</el-link>
      <el-link icon="el-icon-question">常见问题</el-link>
      <el-link icon="el-icon-unlock" @click="passFlag = true">安全中心</el-link>
      <el-link icon="el-icon-school" @click="quit">退出</el-link>
      <el-link>{{ user.userName }}</el-link>
      <img src="../assets/logo.png" alt="" />
    </div>
    <!-- 修改密码的弹出层 -->
    <el-dialog
      :close-on-click-modal="false"
      title="安全中心"
      width="40%"
      :visible.sync="passFlag"
    >
      <el-form ref="passForm" :model="formObj" :rules="ruleForm">
        <el-form-item label="原密码：" prop="userPwd">
          <el-input v-model="formObj.userPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="newPwd">
          <el-input v-model="formObj.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="surePwd">
          <el-input v-model="formObj.surePwd"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success" @click="sureEdit()">确定</el-button>
        <el-button type="danger" @click="passFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _quitLogin, _editPassword } from '../api/home'
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      passFlag: false,
      ruleForm: {
        //表单验证条件
        userPwd: { required: true, message: '原密码不能为空', trigger: 'blur' },
        newPwd: { required: true, message: '新密码不能为空', trigger: 'blur' },
        surePwd: {
          required: true,
          message: '确定密码不能为空',
          trigger: 'blur'
        }
      },
      formObj: {
        userPwd: '', //原密码
        newPwd: '', //新密码
        surePwd: '' //确认密码
      }
    }
  },
  created () {
    this.userAction() //触发actions的方法 调用获取用户信息接口
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapActions(['userAction']), //vuex 辅助函数法使用mutatinos和actions
    async quit () {
      var res = await _quitLogin()
      // 退出登录
      if (res.success) {
        // 跳转回登录页面
        this.$router.push('/login')
      }
    },
    // 确认修改密码
    sureEdit () {
      // 表单组件验证方法
      this.$refs.passForm.validate(async valid => {
        // 修改密码
        if (this.formObj.newPwd == this.formObj.surePwd) {
          var res = await _editPassword({
            userPwd: this.formObj.userPwd, //原密码
            newPwd: this.formObj.newPwd //新密码
          })
          console.log(res)
          if (res.success) {
            this.$message.success('修改密码成功，重新登录。。。')
            this.$router.push('/login')
            this.passFlag = false
          }
        } else {
          this.$message.error('俩次密码不一致')
        }
      })
    }
  }
}
</script>
<style lang="less">
.head_wrap {
  width: 100%;
  height: 70px;
  display: flex;
  background: black;
  color: white;
  justify-content: space-between;
  .logo {
    display: flex;
    img {
      width: 50px;
      height: 50px;
      margin: 10px 10px;
    }
  }
  .head_menu {
    display: flex;
    width: 600px;
    font-size: 20px;
    justify-content: space-around;
    color: white;
    line-height: 70px;
    a {
      color: white;
    }
  }
}
</style>
